<template>
    <div class="wrapper" @click="click_upload" ref="dropcontent">
        <input type="file" class="fileinput" ref="fileinput" @change="chnageFile" multiple="true">
        <slot></slot>
    </div>
</template>
<script>
    import {isImage} from "../../utils/dom";
    import {uploadImage, uploadImages} from "./service";
    import MyAlert from "../../utils/myalert";

    export default {
        props: {
            onProgress: {
                type: Function,
                default: () => {
                }
            },
            onPreview: {
                type: Function,
                default: () => {
                }
            },
            onComplete: {
                type: Function,
                default: () => {
                }
            }
        },
        mounted() {
            var self = this
            var dropZone = this.$refs['dropcontent']
            dropZone.addEventListener("dragenter", function (e) {
                e.preventDefault();
                e.stopPropagation();
            }, false);

            dropZone.addEventListener("dragover", function (e) {
                e.preventDefault();
                e.stopPropagation();
            }, false);

            dropZone.addEventListener("dragleave", function (e) {
                e.preventDefault();
                e.stopPropagation();
            }, false);

            dropZone.addEventListener("drop", function (e) {
                e.preventDefault();
                e.stopPropagation();
                // 处理拖拽文件的逻辑
                var df = e.dataTransfer;
                var dropFiles = []; // 存放拖拽的文件对象

                if (df.items !== undefined) {
                    // Chrome有items属性，对Chrome的单独处理
                    for (var i = 0; i < df.items.length; i++) {
                        var item = df.items[i];
                        // 用webkitGetAsEntry禁止上传目录
                        if (item.kind === "file" && item.webkitGetAsEntry().isFile) {
                            var file = item.getAsFile();
                            dropFiles.push(file);
                        }
                    }
                }
                /*preivew + upload image*/
                /*   var file = dropFiles[0]
                   var reader = new FileReader();
                   reader.readAsDataURL(file);*/

                /*upload*/
                uploadImages(dropFiles, {
                    onComplete(files_array) {
                        MyAlert.close()
                        self.$props.onComplete(files_array)
                    },
                    onProgress(_progress, imageObj) {
                        self.$props.onProgress(_progress, imageObj)
                    }
                }).catch(e => {
                    console.error(e)
                    MyAlert.close()
                    self.$props.onComplete({message: '图片上传失败'})
                    return Promise.reject({message: '图片上传失败'})
                })

            })

        },
        methods: {
            click_upload() {
                this.$refs['fileinput'].dispatchEvent(new MouseEvent('click'))
            },
            chnageFile(e) {
                var self = this
                MyAlert.loading()
                /*preivew*/
                var files = e.target.files
                /*upload*/
                uploadImages(files, {
                    onComplete(_array_files) {
                        MyAlert.close()
                        self.$props.onComplete(_array_files)
                    },
                    onProgress(_progress, imageObj) {
                        self.$props.onProgress(_progress, imageObj)
                    }
                }).catch(e => {
                    console.error(e)
                    MyAlert.close()
                    self.$props.onComplete({message: '图片上传失败'})
                    return Promise.reject({message: '图片上传失败'})
                })

            }
        }
    }
</script>
<style lang="less" scoped>
    .wrapper {
        position: relative;
        .fileinput {
            position: absolute;
            top: 0;
            width: 0;
            height: 0;
            opacity: 0;
        }
    }
</style>